<template>
<div>
 <input v-model="hobby"  type="checkbox" value="抽烟">抽烟
  <input v-model="hobby" type="checkbox" value="喝酒">喝酒
  <input v-model="hobby" type="checkbox" value="烫头">烫头<br>
  您的选择是：{{hobby}}<br>
  <button @click="chenge">点击切换</button>
  <span v-if="flag">你好 vue</span>
  <span v-if="!flag">你好 王二</span>
</div>
</template>

<script>
export default {
  name: "UserView",
  data(){
    return{
    hobby:[],
      flag:true
    }
  },methods:{
  change(){
   this.flag=!this.flag
 }
  },beforeCreate() {
    console.log("1 beforeCreate")
  },created() {
    console.log("2 created")
  },beforeMount() {
    console.log("3 beforeMount")
  }

}
</script>

<style scoped>

</style>